
import { Table,Button,Form, Input,Select,} from 'antd';
import React from 'react'
import  './PersonUser.css'
import  axios from 'axios'

const columns = [
    {
        title: '序号',
        dataIndex: 'key',
        key:'key',
        // width: 80,
        align:'center',
        backgroundColor:'blue'
    },
    {
        title: '账号',
        dataIndex: 'num',
        key:'num',
        // width: 80,
        align:'center'
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key:'email',
        ellipsis: true,   //超过宽度将自动省略
        align:'center'
    },
    {
        title: '手机',
        dataIndex: 'tel',
        key:'tel',
        ellipsis: true,
        align:'center'
    },
    {
        title: '角色 ',
        dataIndex: 'role',
        key:'role',
        ellipsis: true,
        align:'center'
    },
    {
        title: '状态',
        prop: "state",
        ellipsis: true,
        align:'center',
        render: function(UserData){
            return (
                <button className='State'>
                {UserData.state}
                 </button>
            )
        }
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key:'operation',
        ellipsis: true,
        align:'center',
        render(){
            return(
            <span>
             <Button style={{marginRight:5}} plain={true} type="info" size="small">编辑</Button>
             <Button type="danger" size="small">删除</Button>
            </span>
            )
        }
    },
];
class UserList extends  React.Component{
    constructor(){
        super()
        this.state={
            UserData:[],
            form:{
                num:'',
                email:'',
                tel:'',
                state:'启用'
            }
        }
    }
    render() {
        let {UserData} =this.state
        const { Option } = Select;
        return(
            <div >
                <Form inline={true} model={this.state.form} className="demo-form-inline">
                    <Form.Item className='from'>
                        <label>
                         账号：<Input  style={{ width: 120 }}/>
                        </label>
                        <label >
                            邮箱：<Input  style={{ width: 120 }}/>
                        </label>
                        <label>
                            电话：<Input  style={{ width: 120 }}/>
                        </label>
                        <label>状态：
                            <Select defaultValue="启用" style={{width: 100 }}>
                            <Option value="jack">启用</Option>
                            <Option value="lucy">禁用</Option>
                        </Select>
                        </label>
                    </Form.Item>
                    <Form.Item>
                        <Button style={{marginRight:10}} nativeType="submit" type="primary">搜索</Button>
                        <Button nativeType="submit" type="primary">重置</Button>
                    </Form.Item>
                </Form>
                <Table
                    pagination={{
                        defaultPageSize:5,
                        position:['bottomCenter']
                    }} bordered={true} columns={columns}
                    dataSource={UserData}/>
            </div>
        )
    }
   componentDidMount(){
       axios({
           url:'http://123.57.67.148:3000/mock/195/getList',
           method:"get",
       }).then(res=>{
           // console.log(res.data)
           let data = res.data.data.filter(item =>{
               item.key = item.id
               //delete item.id
               return item
           })
           this.setState({
               UserData:data
           })
           console.log( this.state)
       })
   }
   componentWillReceiveProps(){}//跟新props触发，即将废弃
}

export default UserList;